import React, { Component } from 'react';
import { connect } from 'dva';
import { Upload, Icon, Modal, message } from 'antd';
// import Name from '@/components/Name';
// 懒加载组件
// const Name = React.lazy(() => import('./Name'));
import styles from './ArticleInTest.less'; // 样式
import MultiUpload from './components/MultiUpload/MultiUpload';

// store状态管理内读取值
@connect(({ user }) => ({
  user,
}))
class ArticleInTest extends Component {
  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  // qiniu
  getSign = (suffix, width, height, extraParam) => {
    const qiniuApiServerUrl = 'https://hp.bncry.cn/util/getQiniuSignature';
    const url = `${qiniuApiServerUrl}?${[
      `suffix=${suffix}`,
      `width=${width}`,
      `height=${height}`,
    ].join('&')}`;

    return new Promise((resolve, reject) => {
      fetch(url).then(async response => {
        const formData = await response.json();
        resolve({
          token: formData.uptoken,
        });
      });
    });
  };

  onChange = (values) => {
    console.log('上传成功回调', values)
  }

  render() {
    const ossUploadConfig = {
      // type: 'oss',
      imageUploadServerHost: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', // 图片上传服务地址
      imageShowServiceHost: '', // 图片查看地址前缀
      totalNum: 5, // 最大上传数量
      // 回显图片的路径 半路径 ;分隔
      value:'avatar/2018-10-10/38.jpg;avatar/2018-10-10/1080_1920.jpg',
      // maxSize: 1024, // 图片大小限制1MB
      // minWidth: 100, // 图片宽度限制
      // maxWidth: 100,
      // minHeight: 100, // 图片高度限制
      // maxHeight: 100,
    };

    return (
      <div className="clearfix">
        <MultiUpload
          getSign={this.getOSSSign} // 获取签名的方法 Promise
          {...ossUploadConfig}
          onChange={this.onChange} // 图片上传成功时的回调 参数为图片的半路径;分隔的一个字符串
          // 获取签名getSign方法 的第四个参数 供获取签名时 自定义入参
          extraParam={{bizName:"avatar"}}
        />
      </div>
    );
  }
}
// 导出组件，并且载入store内数据
export default ArticleInTest;
